<template>
    <div class="report-five">
        <div class="header"></div>
        <div class="body">
            <h4>
                <span>05</span>知识得分情况分析
            </h4>
            <div class="list">
                <table>
                    <thead>
                        <tr>
                            <th>知识点名称</th>
                            <th>满分</th>
                            <th>得分</th>
                            <th>成就度</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-for="(item,index) in tableData" :key="index">
                            <td>{{item.knowledge}}</td>
                            <td>{{item.score}}</td>
                            <td>{{item.getScore}}</td>
                            <td>
                                <span v-if="item.scoringRate<=0.3">待提高</span>
                                <span v-if="item.scoringRate<=0.7&&item.scoringRate>0.3">良好</span>
                                <span v-if="item.scoringRate>0.7">优秀</span>
                            </td>
                        </tr>
                        <tr>
                            <td>总分</td>
                            <td>{{allScore}}</td>
                            <td>{{allGetScore}}</td>
                            <td>
                                <span v-if="(allGetScore/allScore)<=0.3">待提高</span>
                                <span v-if="(allGetScore/allScore)<=0.7&&(allGetScore/allScore)>0.3">良好</span>
                                <span v-if="(allGetScore/allScore)>0.7">优秀</span>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <div class="chart">
                <chart :options="option" :style="{width:'90%','margin-left':'5%'}"></chart>
                <div class="legend">
                    <span ><i class="all"></i>满分</span>
                    <span ><i class="avg"></i>平均分</span>
                    <span ><i class="get"></i>个人得分</span>
                </div>
            </div>
            <div class="info">
                <p>
                    <img src="../../assets/img/sanjiao.png" alt="">
                    {{comment}}
                    <!-- 孩子的<span v-for="(item,index) in low" :key="index">{{item}}<em v-if="(index<low.length-1)">、</em></span><em v-if="low.length>0">还需要针对性的查漏补缺，建议重新巩固基础知识;</em><span v-for="(item,index) in middle" :key="index">{{item}}<em v-if="(index<middle.length-1)">、</em></span><em v-if="middle.length>0">掌握情况良，希望可以继续保持啦；</em><span v-for="(item,index) in good" :key="index">{{item}}<em v-if="(index<good.length-1)">、</em></span><em v-if="good.length>0">掌握情况挺扎实的，接下来该知识内容可以进行更深层次的学习哦。</em> -->
                </p>
            </div>
            <div @click="$router.go(-1)" class="back">
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-ce1"></use>
                </svg>
                返回
            </div>
        </div>
    </div>
</template>

<script>
import io from '../../lib/io'
import util from '../../lib/util'
export default {
    data(){
        return{
            reportId:'',
            sysCode:'',
            low:"",
            middle:"",
            good:"",
            allScore:"",
            allGetScore:"",
            tableData:[],
            option : {
                title: { text:null }, // 隐藏图表标题
                // legend: { enabled: false }, // 隐藏图例
                tooltip : {
                    trigger: 'axis'
                },
                calculable : true,
                polar : [
                    {
                        nameGap : 5, // 图中工艺等字距离图的距离
                        center:['50%','50%'], // 图的位置
                        name:{
                           show: true, // 是否显示工艺等文字
                           formatter: null, // 工艺等文字的显示形式
                           color:'#333',
                           textStyle: {
                             color:'#333333' // 工艺等文字颜色
                           }
                         },
                        indicator : [
                            {text : '工艺', max  : 100},
                            {text : '设备', max  : 100},
                            {text : '安全', max  : 100},
                            {text : '工艺', max  : 100},
                            {text : '仪表', max  : 100}
                        ],
                        axisLine: {            // 坐标轴线
                            show: true,
                            lineStyle:{
                                width : 1,
                                color : '#d0dafd'
                            }        // 默认显示，属性show控制显示与否
                        },
                        axisLabel: {           // 坐标轴文本标签，详见axis.axisLabel
                            show: false,
                            textStyle: {
                                color: '#333' // 坐标轴刻度文字的样式
                            }
                        },
                        splitArea : {
                            show : true,
                            areaStyle : {
                                color: ["#fff"]  // 图表背景网格的颜色
                            }
                        },
                        splitLine : {
                            show : true,
                            lineStyle : {
                                width : 1,
                                color : '#d0dafd' // 图表背景网格线的颜色
                            }
                        }
                    }
                ],
                series : [
                    {
                        name: '',
                        type: 'radar',
                        // symbol: "none", // 去掉图表中各个图区域的边框线拐点
                        itemStyle: {
                            // borderColor:'red',
                            normal: {
                                // color : "#", // 图表中各个图区域的边框线拐点颜色
                                // lineStyle: {
                                //     color:"white" // 图表中各个图区域的边框线颜色
                                // },
                                areaStyle: {
                                    type: 'default',
                                    opacity: 0.6,
                                }
                            }
                        },
                        data : [
                            {
                                value : [20.8, 20.2, 40, 10.88, 100],
                                itemStyle: {
                                    normal: {
                                        // color:'#d0dafd',
                                        color: {
                                                type: 'linear',
                                                x: 0,
                                                y: 0,
                                                x2: 0,
                                                y2: 1,
                                                colorStops: [{
                                                    offset: 0, color: '#f0cca0' // 0% 处的颜色
                                                }, {
                                                    offset: 1, color: '#ff5501' // 100% 处的颜色
                                                }],
                                                globalCoord: false // 缺省为 false
                                            },
                                        opacity: 0,
                                        areaStyle: {
                                            type: 'default',
                                            opacity: 0, // 图表中各个图区域的透明度
                                            color: "#d0dafd ",// 图表中各个图区域的颜色

                                        }
                                    }
                                },
                                name : '平均分'
                            },
                            {
                                value : [90, 32, 74, 20, 60],
                                itemStyle: {
                                    normal: {
                                        // color:'#ff5501',
                                        color: {
                                                type: 'linear',
                                                x: 0,
                                                y: 0,
                                                x2: 0,
                                                y2: 1,
                                                colorStops: [{
                                                    offset: 0, color: '#90d7f8' // 0% 处的颜色
                                                }, {
                                                    offset: 1, color: '#336af0' // 100% 处的颜色
                                                }],
                                                globalCoord: false // 缺省为 false
                                            },
                                        // opacity: 0.2,
                                        areaStyle: {
                                            type: 'default',
                                            opacity: 0.8,
                                            color: {
                                                type: 'linear',
                                                x: 0,
                                                y: 0,
                                                x2: 0,
                                                y2: 1,
                                                colorStops: [{
                                                    offset: 0, color: 'red' // 0% 处的颜色
                                                }, {
                                                    offset: 1, color: 'blue' // 100% 处的颜色
                                                }],
                                                globalCoord: false // 缺省为 false
                                            }
                                            // color: "#ff5501", // 图表中各个图区域的颜色
                                        }
                                    },

                                },
                                name : '个人得分'
                            },
                        ]
                    }
                ]
            },
            comment:"",
        }
    },
    created(){
        this.reportId = this.$route.query.reportId
        this.sysCode = util.getSysCode(this.$route.query.areamTeamId)
        this.reportKnow()
    },
    methods:{
        reportKnow(){
            let param = {
                reportId:this.reportId,
                sysCode:this.sysCode,
            }
            io.post(io.reportKnow,param,(ret)=>{
                if(ret.success){
                    this.comment = ret.data.comment
                    let data = ret.data.list
                    let knowledge = []
                    let getScore = []
                    let allGetScore = 0
                    let avgScore = []
                    let score = []
                    let low = []
                    let middle = []
                    let good = []
                    let allScore=0
                    this.tableData = data
                    data.map((item)=>{
                        knowledge.push({text:item.knowledge,max:item.score})
                        getScore.push(item.getScore)
                        avgScore.push(item.avgScore)
                        score.push(item.score)
                        allScore = Number(allScore) + Number(item.score)
                        allGetScore = Number(allGetScore) + Number(item.getScore)
                        if(item.scoringRate<=0.3){
                            low.push(item.knowledge)
                        }else if(0.3 < item.scoringRate&&item.scoringRate <= 0.7){
                            middle.push(item.knowledge)
                        }else if(item.scoringRate > 0.7){
                            good.push(item.knowledge)
                        }
                    })
                    this.low = low
                    this.middle = middle
                    this.good = good
                    this.allScore = allScore.toFixed(2)
                    this.allGetScore = allGetScore.toFixed(2)

                    this.option.polar[0].indicator = knowledge
                    this.option.series[0].data[0].value = avgScore
                    this.option.series[0].data[1].value = getScore
                    console.log(this.option)
                }else{
                    alert(ret.desc)
                }
            })
        }
    }
}
</script>
<style lang="less" scoped>
.report-five {
    -webkit-overflow-scrolling: touch;
    height: 100%;
    background: #edf5ff;
    position: relative;
    .header {
        height: 2.5rem;
        background: url('../../assets/img/rep-bg.png');
    }
}
.body {
    background: white;
    width: 90%;
    margin-left: 5%;
    min-height: 90vh;
    position: absolute;
    top: 3vh;
    border-radius: 0.1rem;
    margin-bottom: 1rem;
    box-shadow: 0px 5px 18px 0px rgba(189, 217, 253, 0.5);
     -webkit-overflow-scrolling: touch;
    h4 {
        height: 0.4rem;
        font-size: 0.4rem;
        line-height: 0.4rem;
        font-weight: normal;
        color: #ff7853;
        margin-top: 0.4rem;
        margin-left:0.44rem;
        margin-bottom: 0.5rem;
        span {
            font-size:0.52rem;
            height: 0.4rem;
            line-height: 0.4rem;
            font-weight: normal;
            display: inline-block;
            color: #74a5e1;
            padding-right: 0.22rem;
            border-right: 3px solid #74a5e1;
            font-weight: 100;
            float: left;
            margin-right: 0.2rem;
        }
    }
    .list{
        padding:0 0.3rem;
        table{
            width:100%;
            tr{
                // border-bottom: 1px solid #edecec;
                th{
                    font-size:0.24rem;
                    line-height:0.34rem;
                    font-weight: normal;
                    color:#7aa0cf;
                    padding:0.07rem;
                    width:25%;
                    border-bottom: 1px solid #edecec;

                }
                td{
                    font-size:0.24rem;
                    line-height:0.34rem;
                    font-weight: normal;
                    color:#333;
                    padding:0.07rem;
                    width:25%;
                    text-align: center;
                    border-bottom: 1px solid #edecec;
                }
            }
        }
    }
    .chart{

        margin: 0.4rem 0.3rem 0 0.3rem;
        padding-bottom: 0.28rem;
        border-bottom: 1px dashed #b9b9b9;
        .legend{
            text-align: center;
            margin-top:0.2rem;
            i{
                display:inline-block;
                width:0.22rem;
                height:0.22rem;
                border-radius: 50%;
                vertical-align: -0.03rem;
                margin-right:0.1rem;
            }
            span+span{
                margin-left:0.4rem;
            }
            .all{
                background-color:#d0dafd;

            }
            .get{
                background:#336af0;

            }
            .avg{
                background:#ff5501;
            }
        }
    }
    .info{
        padding:0.25rem 0.3rem;
        font-size:0.24rem;
        line-height:0.36rem;
        color:#333;
        p{
            span{
                em{
                    font-style: normal;
                }
            }
        }

    }
    .back{
        font-size:0.28rem;
        color:#9ab9df;
        font-weight:normal;
        position:absolute;
        left:50%;
        bottom:-0.7rem;
        transform: translateX(-50%);
        .icon{
            font-size:0.26rem;
        }
    }
}
</style>
